# Pestañas / Tabs

### Código

```
<tabs></tabs>
```

### Tokens

**Color**

| Class                           | Property      | Color token       |
| :------------------------------ | :------------ | :---------------- |
| `.bx--tabs__nav-link`           | text color    | `$text-02`        |
| `.bx--tabs__nav-item`           | border-bottom | `$ui-03`          |
| `.bx--tabs__nav-link:selected`  | text color    | `$text-01`        |
| `.bx--tabs__nav-item--selected` | border-bottom | `$interactive-04` |

| Class                       | Property      | Color token |
| :-------------------------- | :------------ | :---------- |
| `.bx--tabs__nav-link:hover` | text color    | `$text-01`  |
| `.bx--tabs__nav-item:hover` | border-bottom | `$ui-04`    |
| `.bx--tabs__nav-item:focus` | border        | `$focus`    |

**Tipografía**

| Class                          | Type token      |
| :----------------------------- | :-------------- |
| `.bx--tabs__nav-link:selected` | `$heading-01`   |
| `.bx--tabs__nav-link`          | `$body-long-01` |

**Estructura**

| Class                 | Property                    | Spacing token |
| :-------------------- | :-------------------------- | :------------ |
| `.bx--tabs__nav-item` | border-bottom               | –             |
| `.bx--tabs__nav-link` | padding-left, padding-right | `$spacing-05` |
| `.bx--tabs__nav-link` | padding-top, padding-bottom | `$spacing-03` |
| `bx--tabs__nav-item`  | margin-left                 | –             |